<template>
  <a-modal
    title="批量设置商品名"
    :visible="show"
    :confirm-loading="confirmLoading"
    :width="650"
    @ok="submit"
    @cancel="handleCancel"
    class="yhs"
  >
    <a-form-model ref="form" :model="form" :layout="layout" style="margin-top:24px" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item
        label="选择账户"
        prop="bdaccounts"
      >
        <!-- <a-select v-model="bdaccounts" mode="multiple" style="width: 100%" @change="handleChange" show-search :filter-option="filterOption" :autoClearSearchValue="false">
          <a-select-option :value="item.id.toString()" v-for="(item) in zhanghuList" :key="item.account">
            {{ item.account }}({{item.username}})
          </a-select-option>
        </a-select> -->
        <vSelect 
          ref="vSelect-product"
          v-model="bdaccounts"
          :data-source="zhanghuList" 
          show-search 
          optionTitleKey="account" 
          optionValueKey="id" 
          mode="multiple"
          :filter-option="filterOption"
          @change="handleChange"
          v-if="show"
        >
        </vSelect>
      </a-form-model-item>
      <a-form-model-item
        label="商品名称"
        prop="product_name"
      >
        <a-input v-model="form.product_name" placeholder="请填写商品名称" autocomplete="off" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import {getAllBdAccountList} from '@/api/xinxiliu/account'
import { chBdAccountProductName } from '@/api/dianshang/dianshang'
import vSelect from '@/components/select/vSelect.vue'

export default {
  components: { vSelect },
  props:{
    show:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      confirmLoading:false,
      form:{
        bdaccounts:'',
        product_name:'',
      },
      bdaccounts:[],
      zhanghuList:[],
      product_name: '',
      labelCol: { span: 4 },
      wrapperCol: { span: 13 },
      btn_wrapperCol:{ span: 13, offset: 7 },
      layout:'horizontal', //'horizontal'|'vertical'

      youhuashi:[],

      rules:{
        bdaccounts:[
          {required: true,message: '请选择子账户', trigger: 'blur'}
        ],
        product_name:[
          {required: true,message: '请填写商品名称', trigger: 'blur'}
        ]
      },
    }
  },
  created(){
    
  },
  methods:{
    getZhanghuList(){
      getAllBdAccountList({}).then((res) => {
        if(res.errcode == 0){
          this.zhanghuList = res.data.filter(e=>e.pid != 0)
        }
      });
    },
    submit(){
      console.log(this.form)
      this.$refs.form.validate((valid)=>{
        if(valid){
          this.confirmLoading = true
          chBdAccountProductName(this.form).then((res) => {
            this.confirmLoading = false
            if(res.errcode == 0){
              this.$message.success('设置成功')
              this.bdaccounts = []
              this.form.bdaccounts = ''
              this.handleCancel()
            }
          }).catch(()=>{
            this.confirmLoading = false
          });
        }
      })
    },
    handleChange(e){
      // console.log(e)
      this.form.bdaccounts = e.join(',')
      // console.log(this.form)
    },
    handleCancel(){
      this.$emit('update:show',false)
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  watch:{
    show(e){
      if(e){
        this.getZhanghuList()
      }else{
        this.bdaccounts = []
        this.form.bdaccounts = ''
        this.form.product_name = ''
        this.$refs['form'].resetFields()
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-select-selection--multiple{
  width: 450px;
  max-height: 150px;
  overflow-y: auto;
}
</style>